<ion-content #content>
  <ion-header>
    <ion-navbar>
      <ion-title>填写申请</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content>
    <ion-grid>
      <ion-row style="background-color: #F4F4F4">
        <ion-col col-4 col-sm-4 col-md-4 col-lg-2 col-xl-2>
            <ion-list>
                <button ion-item *ngFor="let group of materialGroups" (click)="changeGroup(group)">
                  {{ group.groupName }}
                </button>  
            </ion-list>
        </ion-col>
        <ion-col col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10>
          <ion-list>
            <ng-container *ngFor="let item of items">
                <ion-grid style="background-color: #fff;">
                    <ion-row>
                        <ion-col><b>{{item.materialName}}</b></ion-col> <span style="float:right;"><b>￥</b>{{item.materialPrice}}</span>
                    </ion-row>
                    <ion-row>
                      <ion-col col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4>
                          <img style="width: 100%;max-height: 145px;" src="{{item.materialPicture}}"/>
                      </ion-col>
                      <ion-col col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8>
                          <ion-row>
                            <ion-col col-12>
                              <input readonly (click)="openIndex(item)"  class="select-input" value="{{item.materialIndexs}}" placeholder="请选择款式及尺寸"/>
                            </ion-col>
                          </ion-row>
                          <ion-row  align-items-center style="margin-top: 5%;">
                            <ion-col col-4>
                                <div (click)="decrease(item)" style="float: right;">
                                <img style="max-width: 25px;max-height: 25px;" src="assets/imgs/minus.png"/>
                              </div>
                            </ion-col> 
                            <ion-col col-4>
                              <input type="number" value="{{item.materialCount}}" min="0" max="99" readonly style="width:100%;text-align:center;padding: 4px;border:1px solid #ccc;" />
                            </ion-col>
                            <ion-col col-4>
                              <div (click)="increase(item)" style="float: left;">
                                  <img style="max-width: 25px;max-height: 25px;" src="assets/imgs/plus.png"/>
                              </div>
                            </ion-col>
                        </ion-row>
                    </ion-col>
                  </ion-row>
                </ion-grid>
            </ng-container>
          </ion-list>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>

  <ion-footer>
    <ion-toolbar>
      <div>已选择：<span style="color: #3A90F6;" (click)="showCheckedDetail()">{{selectedCount}}</span>件</div>
      <ion-buttons end>
        <button (click)="submit()" ion-button icon-end style="color:#fff;background-color: #3A90F6;">
          提交申请
        </button>
      </ion-buttons>
    </ion-toolbar>
  </ion-footer>
</ion-content>